<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CodeMirror Editor</title>
    <link rel="stylesheet" href="codemirror.min.css">
    <link rel="stylesheet" href="erlang-dark.css">
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #editor{
            height: 100%; 
        }
    </style>
</head>
<body style="height:100%">
    <textarea id="code" name="code"></textarea>
    <script src="codemirror.min.js"></script>
    <script src="javascript.min.js"></script>
    <script src="beautify.min.js"></script>
    <script>
        var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
            mode: 'javascript',
            lineNumbers: true,
			json:true,
            theme: 'erlang-dark'
        });

        function beautify() {
            var code = editor.getValue();
            var formattedCode = js_beautify(code, {
                indent_size: 4,
                space_in_empty_paren: true,
                preserve_newlines: true,
                max_preserve_newlines: 2,
                brace_style: 'expand',
                indent_char: ' '
            });
            editor.setValue(formattedCode);
            console.log(editor.getValue());
        }

    </script>
</body>
</html>